<template>
  <div>
    <a-form-item
      :hidden="true"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
    >
      <a-input
        v-decorator="[formObj.formkey || 'id']" />
    </a-form-item>
    <template v-for="(item,i) in formObj.columns">
      <a-form-item
        :key="i"
        :label="item.label"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <component
          :type="item.type"
          :is="getComponent(item.type)"
          :format="item.format"
          :placeholder="item.placeholder || ''"
          v-decorator="[item.value, {rules: [{required: item.required || false, message: item.message || '' }]}]"
          :dicUrl="item.dicUrl"
          :dic="item.options"/>
      </a-form-item>
    </template>
  </div>
</template>

<script>
/**
 * formObj: {
 *   columns: [
 *     {
 *       label: '',
 *       value: '',
 *       required: true,
 *       message: '',
 *       type: 'input'
 *     }
 *   ]
 * }
 */
const typesMap = {
  select: 'biz-select',
  input: 'biz-input',
  date: 'biz-date'
}
export default {
  name: 'FormTools',
  props: {
    formObj: {
      type: Object,
      default: function () {
        return {
          columns: []
        }
      }
    },
    labelCol: {
      type: Object,
      default: function () {
        return {
          span: 5
        }
      }
    },
    wrapperCol: {
      type: Object,
      default: function () {
        return {
          span: 18
        }
      }
    }
  },
  methods: {
    getComponent (type) {
      return type ? typesMap[type] || `a-${type}` : 'input'
    }
  }
}
</script>

<style scoped>

</style>
